<template>
  <div class="content-box-pile">
    <div class="item">
      <span>{{ "关联事项数" }}</span>
      <span>{{ v1 }}</span>
    </div>
    <div class="item">
      <span>{{ "未关联事项数" }}</span>
      <span>{{ v2 }}</span>
    </div>
    <div class="item">
      <span>{{ "事项覆盖率" }}</span>
      <span>{{ v3 + "%" }}</span>
    </div>
    <div class="item">
      <span>{{ "目录挂接资源率" }}</span>
      <span>{{ v44 + "%" }}</span>
    </div>
    <div class="item">
      <span>{{ "已级联上报目录数" }}</span>
      <span>{{ v5 }}</span>
    </div>
    <div class="item">
      <span>{{ "级联上报资源数据" }}</span>
      <span>{{ v6 }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "i2-box",
  props: {
    v1: {
      type: Number,
      default: 0,
    },
    v2: {
      type: Number,
      default: 0,
    },
    v3: {
      type: Number,
      default: 0,
    },
    v4: {
      type: Object,
      default: {},
    },
    v5: {
      type: Number,
      default: 0,
    },
    v6: {
      type: Number,
      default: 0,
    },
  },
    data() {
      return {
          v44: "",
      }
    },
    mounted() {
        setTimeout(() => {

            this.v44 = (this.v4.gjzyzl/(this.v4.gjzyzl+this.v4.wgjzyzl)*100).toFixed(2)
        }, 1000)
    }

};
</script>

<style lang="less" scoped>
.content-box-pile {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  display: grid;
  grid-gap: 10px;
  width: 100%;
  height: 300px;
  font-size: 16px;
  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    &:nth-child(1) {
      background: url(../../../assets/img/directories/2-1.png) no-repeat;
      background-size: 100% 100%;
      :nth-child(2) {
        color: #3695ff;
      }
    }
    &:nth-child(2) {
      background: url(../../../assets/img/directories/2-2.png) no-repeat;
      background-size: 100% 100%;
      :nth-child(2) {
        color: #ebad59;
      }
    }
    &:nth-child(3) {
      background: url(../../../assets/img/directories/2-3.png) no-repeat;
      background-size: 100% 100%;
      :nth-child(2) {
        color: #3dbddd;
      }
    }
    &:nth-child(4) {
      background: url(../../../assets/img/directories/2-4.png) no-repeat;
      background-size: 100% 100%;
      :nth-child(2) {
        color: #f47676;
      }
    }
    &:nth-child(5) {
      background: url(../../../assets/img/directories/2-5.png) no-repeat;
      background-size: 100% 100%;
      :nth-child(2) {
        color: #3695ff;
      }
    }
    &:nth-child(6) {
      background: url(../../../assets/img/directories/2-6.png) no-repeat;
      background-size: 100% 100%;
      :nth-child(2) {
        color: #ebad59;
      }
    }
  }
}
</style>
